<template>
	<view>
		<view style="line-height: 60rpx;font-size: 35rpx;padding: 25rpx;">
			<text>服务内容</text>
		</view>
		<view class="devideline"></view>
		<view style="padding: 25rpx; line-height: 60rpx;font-size: 30rpx">
			<view>服务名称：{{orderDetail.serverName}}</view>
			<view>用户名：{{orderDetail.userName}}</view>
			<view style="font-size: 28rpx;color: #a4a4a4;">订单类型：{{serviceTypeList[orderDetail.orderType].dictLabel}}</view>
			<view style="font-size: 28rpx;color: #a4a4a4;">服务时间:{{orderDetail.subscribeDate}}</view>
			
		</view>
		<view class="evaluate flex align-items-center">
			<view>
				<text style="float: left;color: black;">服务质量：</text>
				<view v-for="(val, index) in serviceEvaluate" :key="index">
					<image
						@click="setStar(index+1)"
						class="img"
						:src="star > index ? '../../../static/images/star.png' : '../../../static/images/no-star.png'"
						mode="aspectFill"
					></image>
				</view>
			
				<text>{{ serviceEvaluate[star - 1].dictLabel }}</text>
			</view>
			<view style="margin-left: 30rpx; margin-top: 20rpx;background-color: #f8f8f8; height: 150rpx;padding: 15rpx;">
				<textarea name="evaluate" id="" cols="50" rows="10" placeholder="点评一下,您的意见很重要~" v-model="evaluateInfo.text"></textarea>
			</view>
		</view>
		<!-- <view class="evaluate flex align-items-center">
			<view>
				<text style="float: left;color: black;">评价订单：</text>
				<view v-for="(value, myindex) in serviceEvaluateOrder" :key="myindex">
					<image
						@click="setStarOrder(myindex+1)"
						class="img"
						:src="star_order > myindex ? '../../../static/images/star.png' : '../../../static/images/no-star.png'"
						mode="aspectFill"
					></image>
				</view>
				<text>{{ serviceEvaluateOrder[star_order - 1].dictLabel }}</text>
			</view>
			<view style="margin-left: 30rpx; margin-top: 20rpx;background-color: #f8f8f8;height: 150rpx;padding: 15rpx;;">
				<textarea name="evaluate" id="" cols="50" rows="10" placeholder="点评一下,您的意见很重要~"></textarea>
			</view>
		</view> -->
		<view class="devideline"></view>
		<view style="margin-top: 45rpx;">
			<button type="primary" style="width: 75%;" @click="submitEvaluate()">提交</button>
		</view>
	</view>
</template>

<script>
	import *  as order from "@/api/personCenter/ORDER.js";
	import *  as data from "@/api/system/dict/data.js";
	import * as evaluate from "@/api/innovate/evaluate.js"
	
	import {
		defineComponent
	} from "vue";
	
	export default {
		components: {
			
		},
		data() {
			return {
				star: 5, //课程评价，默认5星
				star_order: 5, //课程评价，默认5星
				// starName: ['极差', '差点火候', '一般般', '还可以', '非常好'],
				// starName_order: ['极差', '差点火候', '一般般', '还可以', '非常好'],
				serviceEvaluate:[],
				serviceEvaluateOrder:[],
				orderId:'',
				orderDetail:{},
				memberId:'',
				evaluateInfo:{
					orderId:'',//订单id
					serviceId:'',//服务id
					serviceType:'',//服务类型
					quality:'',//服务质量
					text:'',//评价内容
					userId:'',//用户ID
					userName:'',//用户名
				},
				serviceTypeList:[],
				serviceQuality:[]
				
			}
		},
		onLoad(option) {
			this.orderId = option.orderId
			this.getData()
			this.getUser()
			this.getOrder()
			uni.showLoading({})
		},
		methods:{
			getData(){
				data.getDicts("eval_type").then((response) => {
					this.serviceTypeList = response.data;
				});
				data.getDicts("eval_quality").then((response) => {
					this.serviceQuality = response.data;
					this.serviceEvaluate = response.data
					this.serviceEvaluateOrder = response.data
				});
			},
			getUser(){
				var value = uni.getStorageSync('userInfo') || []
				this.evaluateInfo.userId = value.login_user.member.id
				this.evaluateInfo.userName = value.login_user.member.name
			},
			getOrder(){
				order.getORDER(this.orderId).then((res)=>{
					this.orderDetail = res.data
					uni.hideLoading()
				})
			},
			evaluate(){
				uni.navigateTo({
					url:'/subpages/pages/evaluate/evaluate'
				})
			},
			setStar: function(star) {
				this.star = star;
			},
			setStarOrder: function(star) {
				this.star_order = star;
			},
			submitEvaluate(){
				//订单ID    服务id   服务类型   服务质量   评价内容   
				this.evaluateInfo.serviceType = this.orderDetail.orderType
				this.evaluateInfo.serviceId = this.orderDetail.serverId
				this.evaluateInfo.orderId = this.orderDetail.id
				this.evaluateInfo.quality = this.star
				evaluate.addEvaluate(this.evaluateInfo).then((res)=>{
					if(res.code == '200'){
						uni.navigateBack()
					}
				})
			}
			
		}
	}
</script>

<style>
	.devideline {
		float: left; 
		height: 0.3rpx;
		width:100%;
		background-color: #eeeeee;
		margin-top: 15rpx;
		margin-bottom: 15rpx;
	}
	
	.evaluate {
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
		height: 250rpx;
		border-top: 1rpx solid #e5e5e5;
		margin-top: 30rpx;
		padding: 25rpx;
		}
	
	.evaluate .img {
		width: 43rpx;
		height: 43rpx;
		float: left;
		margin-left: 30rpx;
		margin-bottom: 10rpx;
/* 		margin-top: 35rpx; */
	}
	
	.evaluate text {
		font-size: 28rpx;
		line-height: 43rpx;
		color: #c4c4c4;
		margin-left: 30rpx;
	}
</style>